<template>
  <div class="image-wrap">
    <div class="image-txt">
      <div class="text-contain">
        <span>影</span>
        <span>像</span>
      </div>
    </div>
    <div
      class="img-show"
      :class="selectImage === '天地图影像' ? 'active' : ''"
      @click="switchImage('天地图影像')"
    >
      <img src="../../../../assets/png/img_1.png" />
      <div class="img-title map">天地图</div>
    </div>
    <div
      class="img-show"
      :class="selectImage === '天地图矢量' ? 'active' : ''"
      @click="switchImage('天地图矢量')"
    >
      <img src="../../../../assets/png/img_2.png" />
      <div class="img-title no">无</div>
    </div>
  </div>
  <div class="tool-box">
    <div class="tool-item" v-for="list in toolList" :key="list.code" @click="toolChange(list)">
      <SvgIcon :icon-class="list.icon"> </SvgIcon>
    </div>
  </div>
  <ResourceDetail
    v-if="visible"
    :resource="props.resource"
    @handleClose="handleClose"
  ></ResourceDetail>
</template>

<script setup lang="ts">
import ResourceDetail from './resource-detail.vue';
import { IResource } from '@/api/resource/types';
import { useSettingStore } from '@/store/setting';

defineOptions({
  name: '',
});

interface IProps {
  resource: IResource;
}

const props = withDefaults(defineProps<IProps>(), {
  resource: () => ({} as IResource),
});

const selectImage = ref<string>('天地图影像');
const toolList = [
  { code: 1, name: '全屏', icon: 'ic_全屏' },
  { code: 2, name: '详情', icon: 'ic_详情' },
];
const isFullScreen = ref<boolean>(false);
const visible = ref<boolean>(false);
const settingStore = useSettingStore();

const switchImage = async (str: string) => {
  await settingStore.getMapToken();
  selectImage.value = str;
  const { cimInstance } = window;
  cimInstance.api.destroyLayer('天地图影像');
  cimInstance.api.destroyLayer('天地图矢量');
  if (selectImage.value === '天地图影像') {
    cimInstance.api.addImageLayer({
      enable: true,
      type: 'image',
      name: '天地图影像',
      source: 'tianditu',
      dataSourceUrl:
        'http://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' +
        settingStore.token,
      maximumLevel: 18,
      minimumLevel: 1,
    });
  } else if (selectImage.value === '天地图矢量') {
    cimInstance.api.addImageLayer({
      enable: true,
      index: 1,
      type: 'image',
      source: 'tianditu',
      name: '天地图矢量',
      dataSourceUrl:
        'http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' +
        settingStore.token,
      maximumLevel: 18,
      minimumLevel: 1,
    });
  } else {
  }
};

const toolChange = (item: any) => {
  const { cimInstance } = window;
  if (item.code === 1) {
    isFullScreen.value = !isFullScreen.value;
    if (isFullScreen.value) {
      cimInstance.api.fullScreen(document.body);
    } else {
      cimInstance.api.exitFullscreen();
    }
    return;
  } else {
    visible.value = true;
  }
};

function handleClose() {
  visible.value = false;
}
</script>

<style lang="less" scoped>
.image-wrap {
  position: absolute;
  width: 398px;
  height: 120px;
  background: #171a1f;
  border-radius: 8px;
  // opacity: 0.68;
  left: 0;
  bottom: 50px;
  display: flex;
  align-items: center;

  .image-txt {
    width: 48px;
    height: 120px;
    background: #0560fd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .text-contain {
      height: 66px;
    }

    span {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      letter-spacing: 34px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }
  }

  div:not(div.image-txt) {
    margin-left: 9px;

    img {
      background: #171a1f;
      border-radius: 8px;
      opacity: 0.68;
    }
  }

  .img-show {
    position: relative;
    cursor: pointer;
    opacity: 0.8;
    box-sizing: content-box;
    border: 1px solid #171a1f;
    border-radius: 4px;
    height: 100px;

    &.active {
      opacity: 1;
      border: 1px solid #0560fd;
      border-radius: 4px;
    }

    .img-title {
      position: absolute;
      width: 68px;
      height: 28px;
      border-radius: 8px 0px 4px 0px;
      opacity: 0.8;
      right: 0;
      bottom: 0;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 22px;
      line-height: 28px;
      text-align: center;
    }

    .map {
      background: #0560fd;
    }
    .no {
      background: #161616;
    }
  }
}

.tool-box {
  position: absolute;
  top: 80px;
  right: 20px;
  .tool-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background: #2a2e33;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    .svg-icon {
      margin-right: 0px;
      font-size: 24px;
    }
  }
}
</style>
